<!--  -->
<template>
  <div>
    <el-table
      :data="page.list"
      v-loading="fullscreenLoading"
      stripe
      style="width: 100%"
      :highlight-current-row="false"
      :border="true"
      class="task-list-table"
      header-row-class-name="common-list-table-header taks-list-table-header"
      ref="multipleTable"
    >
      <template v-if="dataType == 'part'">
        <el-table-column
          show-overflow-tooltip
          prop="serialNumber"
          :label="$t('common.fields.serialNumber.displayName')"
          width="180"
        >
          <template slot-scope="scope">
            <sample-tooltip :row="scope.row">
              <template slot="content" slot-scope="{ isContentTooltip }">
                <el-tooltip
                  :content="scope.row.serialNumber"
                  placement="top"
                  :disabled="!isContentTooltip"
                >
                  <a
                    href=""
                    class="view-detail-btn"
                    @click.stop.prevent="openMenuTab(scope.row.id)"
                  >
                    {{ scope.row.serialNumber }}
                  </a>
                </el-tooltip>
              </template>
            </sample-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          :label="$t('common.base.name')"
          width="180"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="type" :label="$t('product.component.miniTable.partType.type')">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="standard" :label="$t('product.component.miniTable.partType.standard')">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="unit" :label="$t('product.component.miniTable.partType.unit')">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="salePrice" :label="$t('product.component.miniTable.partType.salePrice')">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="costPrice" :label="$t('product.component.miniTable.partType.costPrice')">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="description" :label="$t('product.component.miniTable.partType.description')">
        </el-table-column>
        <!-- 配件状态 -->
        <el-table-column show-overflow-tooltip prop="enable" :label="$t('product.component.miniTable.partType.accessoryStatus')">
          <template slot-scope="scope">
            <span>{{ scope.row.enable ? $t('common.base.enabled') : $t('common.base.disabled') }}</span>
          </template>
        </el-table-column>
      </template>
      <template v-if="dataType == 'wiki'">
        <el-table-column
          prop="title"
          :label="$t('common.base.title')"
          width="180"
        >
          <template slot-scope="scope">
            <sample-tooltip :row="scope.row">
              <template slot="content" slot-scope="{ isContentTooltip }">
                <el-tooltip
                  :content="scope.row.title"
                  placement="top"
                  :disabled="!isContentTooltip"
                >
                  <a
                    href=""
                    class="view-detail-btn"
                    @click.stop.prevent="openMenuTab(scope.row.id)"
                  >
                    {{ scope.row.title }}
                  </a>
                </el-tooltip>
              </template>
            </sample-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="type"
          :label="$t('product.component.miniTable.wikiType.type')"
          width="180"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          :label="$t('common.base.createUser')"
        >
          <template slot-scope="scope">
            <template v-if="isOpenData">
              <open-data type='userName' :openid="scope.row.createUserStaffId"></open-data>
            </template>
            <template v-else>
              {{ scope.row.createUserName }}
            </template>
          </template>
        </el-table-column>
      </template>
      <template v-if="dataType == 'product'">
        <el-table-column
          prop="productName"
          show-overflow-tooltip
          :label="$t('common.form.type.productName')"
          width="180"
        >
          <template slot-scope="scope">
            <sample-tooltip :row="scope.row">
              <template slot="content" slot-scope="{ isContentTooltip }">
                <el-tooltip
                  :content="scope.row.productName"
                  placement="top"
                  :disabled="!isContentTooltip"
                >
                  <a
                    href=""
                    :class="globalIsHaveProductViewDetailAuth ? 'view-detail-btn' : 'view-detail-btn-disabled'"
                    @click.stop.prevent="openMenuTab(scope.row.productId)"
                  >
                    {{ scope.row.productName }}
                  </a>
                </el-tooltip>
              </template>
            </sample-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="serialNumber"
          :label="$t('product.component.miniTable.productType.serialNumber')"
          width="180"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="type"
          :label="$t('product.component.miniTable.productType.type')"
          width="180"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="customerName"
          :label="$t('common.form.type.customerName')"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="createUserName"
          :label="$t('common.base.createUser')"
        >
          <template slot-scope="scope">
            <template v-if="isOpenData">
              <open-data type='userName' :openid="scope.row.createUserStaffId"></open-data>
            </template>
            <template v-else>
              {{ scope.row.createUserName }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          v-if="pageType == 'view'"
          :label="$t('common.fields.action.displayName')"
          fixed="right"
        >
        <template slot-scope="scope">
          <a href class="color-danger" @click.stop.prevent="unRelationCatalog(scope.row.productId)"
          >{{$t('product.btns.disassociate')}}</a
        >
        </template></el-table-column>
      </template>

      <el-table-column show-overflow-tooltip prop="createTime" :label="$t('common.base.createTime')">
        <template slot-scope="scope">
          {{ scope.row.createTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        v-if="this.dataType === 'part' || this.dataType === 'wiki'"
        prop="address"
        :label="$t('common.fields.action.displayName')"
        fixed="right"
      >
        <template slot-scope="scope">
          <a href class="color-danger" @click.stop.prevent="dlete(scope.row)"
          >{{$t('common.base.delete')}}</a
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="table-footer comment-list-table-footer">
      <div class="comment-list-table-footer-info task-flex task-ai">
        <i18n path="product.component.miniTable.allCount">
          <span class="level-padding" place="count">{{ page.total || 0 }}</span>
        </i18n>
        <div class="task-font14 task-c6 task-ml12">
          <i18n path="product.component.miniTable.pageCount">
            <el-select
              v-model="searchModel.pageSize"
              :placeholder="$t('common.placeholder.select')"
              @change="handleSizeChange(searchModel.pageSize)"
              class="table-footer-select"
              place="count"
            >
              <el-option :label="10" :value="10"></el-option>
              <el-option :label="20" :value="20"></el-option>
              <el-option :label="50" :value="50"></el-option>
            </el-select>
          </i18n>
        </div>
      </div>
      <el-pagination
        v-if="page.list.length"
        class="comment-list-table-footer-pagination"
        background
        @current-change="jump"
        @size-change="handleSizeChange"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { isOpenData, openAccurateTab } from '@src/util/platform'
import mixin from './tableMixin.js';
import Page from '@model/Page';
import { formatDate } from 'pub-bbx-utils';

import {
  getPageLinkPart,
  getPageLinkWiki,
  getPageLinkProduct,
  removePartOrWiki,
  unRelationCatalog
} from '@src/api/ProductV2Api';

import AuthMixin from '@src/mixins/authMixin'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
export default {
  name: 'product-menu-mini-table',
  mixins: [mixin, AuthMixin],
  props: {
    id: {
      type: Number | String,
    },
    pageType: {
      type: String,
      default: 'view',
    },
    dataType: {
      type: String,
    },
  },
  filters: {
    formatDate(val) {
      if (!val) return '';
      return formatDate(val, 'YYYY-MM-DD HH:mm:ss');
    },
  },
  data() {
    return {
      isOpenData,
      searchModel: {
        pageSize: 10,
        pageNum: 1,
      },
      page: new Page(),
      fullscreenLoading: false,
      httpObj: {
        part: getPageLinkPart,
        wiki: getPageLinkWiki,
        product: getPageLinkProduct
      },
    };
  },
  computed: {
    isProduct() {
      return this.dataType == 'product'
    }
  },
  watch: {
    'page.total'(newLen, oldLen) {
      if (newLen === 0 || oldLen === 0) {
        this.$emit('hasValue', newLen > 0)
      }
    }
  },
  mounted() {
    this.reflash();
  },
  methods: {
    // 取消关联
    unRelationCatalog(productId){
      this.$confirm(this.$t('product.component.miniTable.tips.tip1'),this.$t('common.base.toast'),{
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning'
      }).then(()=>{
        const params={
          productId
        }
        unRelationCatalog(params).then(res=>{
          if(res.code===0){
            this.reflash();
            window.parent.flashSomePage([{
              type: 'M_PRODUCT_CATALOG',
            }]);
            this.$emit('reload')
          }else{
            this.$notify.close();
            this.$notify.error({
              title: this.$t('common.base.tip.httpIsError'),
              message: res.message,
              duration: 2000,
            });
          }
        });
      }).catch(()=>{})
    },
    // 搜索
    search() {
      this.fullscreenLoading = true;
      return this.httpObj[this.dataType]({ ...this.searchModel, id: this.id })
        .then((res) => {
          if (res.code == 0) {
            res.result.list=res.result.list||[];
            this.page = res.result;
          } else {
            this.$notify.close();
            this.$notify.error({
              title: this.$t('common.base.tip.httpIsError'),
              message: res.message,
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          // this.$emit("pageLoading", false);
        })
        .finally(() => {
          this.fullscreenLoading = false;
        });
    },
    dlete(data) {
      this.$confirm(
        this.$t('product.component.miniTable.tips.tip2', {moduleName: this.dataType == 'part' ? '备件' : '知识库'}),
        this.$t('common.base.toast'),
        {
          confirmButtonText: this.$t('common.base.makeSure'),
          cancelButtonText: this.$t('common.base.cancel'),
          type: 'warning',
        }
      )
        .then(() => {
          removePartOrWiki({
            id: this.id,
            relationId: data.id,
            type: this.dataType,
          }).then((res) => {
            if (res.code == 0) {
              this.reflash();
              this.$emit('reload')
              window.parent.flashSomePage([{
                type: 'M_PRODUCT_CATALOG',
              }]);
            } else {
              this.$notify.close();
              this.$notify.error({
                title: this.$t('common.base.tip.httpIsError'),
                message: res.message,
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {});
    },
    // 页码数切换
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.searchModel.pageNum = 1;
      this.search();
    },
    // 跳转
    jump(pageNum) {
      this.searchModel.pageNum = pageNum;
      this.search();
    },
    reflash() {
      this.searchModel.pageSize = 10;
      this.searchModel.pageNum = 1;
      if(this.id){
        this.search();
      }
    },
    // 新页面打开通知公告详情
    openFrame(id) {
      let fromId = window.frameElement.getAttribute('id');

      // this.$platform.openTab({
      //   id: `document_detail_${this.detail.id}`,
      //   title: '知识库列表',
      //   url: `/wiki/detail/page?wikiId=${this.detail.id}`,
      //   reload: true,
      //   close: true,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageWikiDetail,
        key: this.detail.id,
        params: `wikiId=${this.detail.id}`,
        reload: true,
        fromId
      })
    },
    openMenuTab(id) {
      let fromId = '';
      try {
        fromId = window.frameElement.getAttribute('id');
      } catch (error) {
        console.error(error);
      }
      
      if (this.isProduct && !this.globalIsHaveProductViewDetailAuth) {
        return
      }
      let pageObj = {
        product: {
          type: PageRoutesTypeEnum.PageProductView,
          key: id,
        },
        wiki: {
          type: PageRoutesTypeEnum.PageWikiDetail,
          params: `wikiId=${id}`,
        },
        part: {
          type: PageRoutesTypeEnum.PagePartCategoryDetail,
          params: `id=${id}`,
        },
      }
      openAccurateTab({
        fromId,
        ...pageObj[this.dataType]
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.table-footer {
  margin-top: 12px;
}
::v-deep .el-table--border{
  border: 1px solid #ebeef5;
}
</style>

<style lang="scss">
.view-detail-btn-disabled {
  color: #666 !important;
  cursor: default;
}
</style>
